<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/* styles.css */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #007bff;
    color: white;
    white-space: nowrap;
}

input[type="text"], select, input[type="file"] {
    width: 100%;
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #28a745;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #218838;
}

.hidden {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    form {
        width: auto;
    }
}

</style>
</head>
<body>
<form action="AdminEditGoodServlet" method="post" enctype="multipart/form-data">
		<table border="1" cellspacing="0" cellpadding="2">
			<tr>
				<td>商品名：</td>
				<td><input name="name" type="text" value="${Product.getPname() }"></td>
			</tr>
			<tr>
				<td>商品价格：</td>
				<td><input name="price" type="text" value="${Product.getPprice() }"></td>
			</tr>
			<tr>
				<td>商品库存：</td>
				<td><input name="stuck" type="text" value="${Product.getStuck() }"></td>
			</tr>
			<tr>
				<td>类别：</td>
				<td>
				<select name="category" id="category">
					<c:forEach items="${categoryList }" var="category">
						<option value="${category.getCategory() }">${category.getCategoryName() }</option>
					</c:forEach>
				</select>
				</td>
			</tr>
			<tr>
				<td>供应商：</td>
				<td>
				<select name="provider" id="provider">
					<c:forEach items="${providerList }" var="provider">
						<option value="${provider.getProviderId() }">${provider.getProviderName() }</option>
					</c:forEach>
				</select>
				</td>
			</tr>
			<tr>
				<td>当前图片：</td>
				<td>${Product.getPimage() }&nbsp;&nbsp;<input type="button" value="修改" onclick="setVisible()"></td>
			</tr>
			<tr id="file" style="display:none;">
				<td><input type="file" name="picture"></td>
			</tr>
			<tr>
				<td colspan="2" style="text-align:center;"><input type="submit" value="提交"></td>
			</tr>
		</table>
		<input type="hidden" value="${Product.getPid() }" name="pid">
	</form>
	<input type="hidden" id="index" value="${Product.getCategory()-1}">
	<input type="hidden" id="index2" value="${Product.getProvider()-1}">
	<script>
	window.onload = function() {
	    var index = document.getElementById("index").value;
	    var index2 = document.getElementById("index2").value;
	    document.getElementById("category").selectedIndex = index;
	    document.getElementById("provider").selectedIndex = index2;
	    
	    var fileRow = document.getElementById("file");
	    var picButton = document.querySelector('input[type="button"][onclick^="setVisible"]');
	    
	    picButton.onclick = function() {
	        fileRow.style.display = fileRow.style.display === "none" ? "table-row" : "none";
	    };
	};
	</script>
</body>
</html>